<template>
	<div class="cate-tab2">
		<template v-for="item in tabs2List">
			<div class="tab2top" :key="item.id" v-if="item.id==1">
				<img :src="item.imgURL" />
				<div class="tab2top-txt">
					<span>
						{{item.title}}——{{item.msg}}
					</span>
					<strong>￥{{item.price}}</strong>
				</div>
			</div>
		</template>
		<div class="tab2bottom swiper">
			<ol class="tab2-swiper swiper-wrapper">
				<template v-for="item in tabs2List">
					<li class="swiper-slide " :key="item.id" v-if="item.id!=1">
						<router-link to="/" >
							<div class="tab2-img">
								<img :src="item.imgURL" />
								<span class="img-txt">{{item.city}}</span>
							</div>
							<aside>
								<h3>{{item.title}}</h3>
								<label>{{item.msg}}</label>
								<p>￥{{item.price}}</p>
							</aside>
						</router-link>
					</li>
				</template>
			</ol>
		</div>
	</div>
</template>

<script>
//引入vue周期函数
import {onMounted} from 'vue';

//引入Swiper滑动插件
import Swiper from 'swiper';
export default {
	name:'Category2',
	props:['propcategort'],
	data(){
		return {
			tabs2List : []
		}
	},
	watch:{
		propcategort(){
			this.tabs2List = this.propcategort.tab2List;
		}
	},
	setup(){
		//实例挂载标签之后
		onMounted(()=>{
			new Swiper('.tab2bottom',{
				slidesPerView : 3,  
			});
		})
	}
}
</script>

<style scoped>
a{
	text-decoration: none;
	color: black;
}
.cate-tab2{
	width: 100%;
	margin-top: 0.2rem;
	overflow: hidden;
}
.tab2top{
	width: 100%;
	height: 4rem;
	position: relative;
	overflow: hidden;
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
}
.tab2top img{
	position: absolute;
	width: 100%;
	height: 100%;
}
.cate-tab2 .tab2top .tab2top-txt{
	position: absolute;
	left: 0;
	font-size: 0.3rem;
	color: white;
	text-indent: 0.15rem;
	width: 100%;
	bottom: 0;
	line-height: 0.6rem;
	background-color: rgba(0,0,0,0.6);
}
.cate-tab2 .tab2top .tab2top-txt strong{
	font-size: 0.35rem;
	padding-right: 0.2rem;
	font-weight: bold;
	color: #fc8329;
	float: right;
}
.tab2bottom{
	width: 100%;
	margin-top: 0.2rem;
	margin-bottom: 0.3rem;
}
.tab2-swiper{
	width: 100%;
}
.tab2-swiper .swiper-slide{
	overflow: hidden;
	
}
.tab2-swiper li .tab2-img{
	width: 95%;
	margin-left: 0.05rem;
	position: relative;
	border-radius: 0.2rem;
	overflow: hidden;
}
.tab2-swiper li img{
	width: 100%;
	height: 100%;
	height: 1.8rem;
}
.tab2-swiper li .img-txt{
	position: absolute;
	color: white;
	padding: 0.1rem 0.25rem;
	top: 0;
	left: 0;
	border-bottom-right-radius: 0.2rem;
	background-color: rgba(0,0,0,0.6);
}
.tab2-swiper aside h3{
	font-size: 0.3rem;
	line-height: 0.55rem;
}
.tab2-swiper aside label{
	color: #737373;
	width: 95%;
	overflow: hidden;
	display: -webkit-box;/* 转换为盒子 */
	-webkit-line-clamp: 1;/* 跟高度有关 */
	-webkit-box-orient: vertical;/* 超出盒子外的文本用省略号代替 */
	line-height: 0.3rem;
}
.tab2-swiper aside p{
	font-size: 0.35rem;
	line-height: 0.45rem;
	font-weight: bold;
	color: #FC8329;
}
</style>
